<template>
	<view>
		<z-paging ref='paging' v-model="list"  @query="getList">
			<view class="p-10" v-for="(item,index) in list" :key='index'>
				<view class="bg-white round-8 p-15">
					<view class="flex flex-x-space-between border-bottom-eee py-10">
						<text>{{item.order_no}}</text>
						<text style="color: #395cef;">已支付</text>
					</view>
					<view class="flex py-15 ">
						<image :src="item.community.cover_image" class="w-70 h-70 img_flex"></image>
						<view class="flex flex-column ml-16 grid-gap-8">
							<text class="fs-17">{{item.community.desc}}</text>
							<view>
								<text class="py-3 fs-14 px-6 round-4"
									style="background-color: #FCEEEE;color: #CE4949;">{{item.community.name}}</text>
							</view>
							<text class="fs-15 fw-600" style="color: #fc3232;">￥{{item.price}}</text>
						</view>
					</view>
				</view>
			</view>
		</z-paging>
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	import { $http } from '@/utils';
	const paging = ref()
	const list = ref()
	
	const getList = (page, limit) => {
		$http.get('Order/getOrderList', { page: page, limit: limit }).then(res => {
			paging.value.complete(res.data)
		})
	}
</script>

<style>

</style>